<template>
  <div v-loading="listLoading">
    <div v-if="list.length!=0"  style="height:auto;width:100%">
      <el-row style="background:#fafafa;height:50px;width:99%">
        <label style="display:inline-block;width:30%;text-align:center;line-height:50px;font-size:14px">商品</label>
        <label style="display:inline-block;width:17%;text-align:center;line-height:50px;font-size:14px">销售价</label>
        <label style="display:inline-block;width:13%;text-align:center;line-height:50px;font-size:14px">数量</label>
        <label style="display:inline-block;width:15%;text-align:center;line-height:50px;font-size:14px">应付</label>
        <!-- <label style="display:inline-block;width:10%;text-align:center;line-height:50px;font-size:14px">小康币抵扣</label> -->
        <label style="display:inline-block;width:10%;text-align:center;line-height:50px;font-size:14px">实付</label>
        <label style="display:inline-block;width:12%;text-align:center;line-height:50px;font-size:14px">操作状态</label>
      </el-row>
      <table v-for="(item,index) in list" :key="index" style="width:99%;height:auto;margin-top:20px">
        <thead style="background:#fafafa;height:auto;">
          <tr style="height:50px;">
            <td width="10%">
              <p style="float:right;margin-bottom:0">订单号：</p>
            </td>
            <td width="15%">{{item.orderNum}}</td>
            <td width="15%" align="center">{{item.createTime}}</td>
            <td width="15%">{{item.snickName}}：{{item.suserName}}</td>
            <td width="5%">区域：{{item.scounty}}</td>
            <td width="10%" style="font-size:12px" align="center">提货网点：{{item.shipAds}}</td>

            <!-- <td width="10%"><p v-if="item.status==40 || item.status==50" style="float:right;margin-bottom:0">运单信息:</p></td> -->
            <!-- <td width="10%"><p v-if="item.status==50" style="margin-bottom:0">{{item.transNo}}</p><el-button v-if="item.status==40" type="primary" size="small" @click='addWaybill(item)'>添加运单信息</el-button></td> -->
            <td width="15%" align="center">{{item.status=='10'?'待付款':item.status==='40'?'待收货':item.status==='50'?'交易成功':item.status==='70'?'交易成功，用户删除':'暂无'}}</td>
          </tr>
        </thead>
        <tbody v-for="(p,i) in item.proList" :key="i" style="border:1px solid #E4E4E4;border-top:0">
          <tr>
            <td width="13%" rowspan="2">
              <img :src="p.proImageUrl" width="120" height="120" style="margin-left:20px" alt="">
            </td>
            <td width="17%" style="padding-left: 0px !important;" class="pname">
              <strong>{{p.proName}}</strong>
            </td>
            <td width="15%" style="text-align:center">
              {{p.currentPrice}}
            </td>
            <td width="10%" align="center">
              {{p.proAmount}}
            </td>
            <td width="15%" align="center">
              {{p.proTotalPrice}}
            </td>
            <td width="11%" align="center">
            </td>
            <td width="9%" align="center">
            </td>
            <td width="15%" align="center">
            </td>
          </tr>
          <tr>
            <td colSpan="1" className="tableBoo">
              <strong>型号:</strong>
              <span>{{p.proType}}</span>
            </td>
            <td colSpan="6" className="tableBoo" align="center">

            </td>
          </tr>
        </tbody>
        <tfoot style="border:1px solid #E4E4E4;border-top:0">
          <tr style="height:50px">
            <td width="10%">合计：</td>
            <td width="15%"></td>
            <td width="15%"></td>
            <td width="10%" align="center"></td>
            <td width="15%" align="center">{{item.sumMoney}}</td>
            <!-- <td width="10%" align="center">{{item.xkb}}</td> -->
            <td width="10%" align="center">{{item.paidMoney}}</td>
            <td width="15%"></td>
          </tr>
        </tfoot>
      </table>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
        @pagination="getList" />
      <el-dialog :append-to-body="true" title="添加物流信息" :visible.sync="dialogFormVisible" width="40%">
        <el-form label-position="left" label-width="150px" :model="temp" style="width: 400px; margin-left:50px;">
          <el-form-item label="快递公司：">
            <el-input v-model="temp.transCo" />
          </el-form-item>
          <el-form-item label="快递单号：">
            <el-input v-model="temp.transNo" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addData">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div v-else>
      <h2 style="text-align: center;">暂无订单</h2>
    </div>
  </div>

</template>


<script>
  import {
    getListPage,
    addTrans
  } from '@/api/orderList'
  import Pagination from '@/components/Pagination'

  export default {
    inject: ["reload"],
    components: {
      Pagination
    },
    props: {
      value1: {
        type: Array,
        required: true
      },
      orderName: {
        type: String,
        required: true
      },
      shipAds: {
        type: String,
        required: true
      },
      // tabName:{
      //   type:String,
      //   required:true
      // },
      allStatus: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        list: null,
        total: 0,
        listQuery: {
          pageNum: 1,
          pageSize: 10
        },
        listLoading: true,
        begin: '',
        end: '',
        allStatus: '',
        dialogFormVisible: false,
        orderId: '',
        temp: {
          orderId: ''
        },
        // company:'',
        // express:''
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // console.log(this.value1)
      addWaybill(item) {
        this.dialogFormVisible = true
        this.orderId = item.orderId
        console.log(item)
        this.temp = Object.assign({}, item)
      },
      addData() {
        this.temp.orderId = this.orderId
        addTrans(this.temp).then(res => {
          if (res.code === '200') {
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          }
          this.dialogFormVisible = false
          this.reload()
        })
      },
      getList() {
        console.log('获取')
        this.listLoading = true
        if (this.value1 !== null) {
          if (this.value1.length >= 2) {
            this.begin = this.value1[0]
            this.end = this.value1[1]
          } else {
            this.begin = ''
            this.end = ''
          }
        } else {
          this.begin = ''
          this.end = ''
        }
        var params = {
          pageNum: this.listQuery.pageNum,
          pageSize: this.listQuery.pageSize,
          begincreateTime: this.begin,
          endcreateTime: this.end,
          orderNum: this.orderName,
          shipAds: this.shipAds,
          status: this.allStatus
        }
        getListPage(params).then(res => {
          this.list = res.data
          this.total = res.count
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }
    }
  }
</script>
